<template>
	<view style="padding: 40rpx;">
		<u-form label-position="top" label-width="200" :model="form" ref="uForm">
			<u-form-item label="联系人" prop="name">
				<u-input placeholder="请输入您的姓名" v-model="form.name" />
			</u-form-item>
			<u-form-item label="联系方式" prop="mobile">
				<u-input placeholder="请输入您的手机号码" v-model="form.mobile" />
			</u-form-item>
			<u-form-item label="合作事项" prop="need">
				<u-input placeholder="请输入您的合作需求" v-model="form.need" type="textarea" height="100" autoHeight="false" />
			</u-form-item>

			<u-button :custom-style="customStyle" shape="circle" @click="submit">提交</u-button>
		</u-form>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				form: {
					name: '',
					mobile: '',
					need: ''
				},
				errorType: ['message'],
				rules: {
					mobile: [{
						required: true,
						message: '请输入手机号码',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}, {
						pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/g,
						// 正则检验前先将值转为字符串
						transform(value) {
							return String(value);
						},
						message: '请输入正确的手机号码'
					}],
					name: [{
						required: true,
						message: '请输入联系人姓名',
						trigger: ['change', 'blur'],
					}],
					need: [{
						required: true,
						message: '请说明您的需求',
						trigger: ['change', 'blur'],
					}]
				},
				customStyle: {
					'backgroundImage': 'linear-gradient(to left, RGBA(255, 200, 71, 1) , #FDD871)',
					'color': '#fff',
					'margin-bottom': '0',
					'margin-top': '80rpx',
				},
			}
		},
		onReady() {
			console.log(this.rules)
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			submit() {
				let that = this;
				this.$refs.uForm.validate(valid => {
					console.log(valid)
					if (valid) {
						that.$u.api.business({
							mobile: that.form.mobile,
							name: that.form.name,
							remark: that.form.need
						}).then(res => {
							that.$u.toast('提交成功');
						})
					} else {
						console.log('验证失败');
					}
				});

			}
		},

	}
</script>

<style>

</style>
